import React, { Component } from 'react';
import '../styles/Hhao.scss'
import { withRouter } from 'react-router-dom';
import *as service from  '../api/api'
class Hhao extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ssindex:0,
            header_info: [
                { name: '待接诊' },
                { name: '已结束' },
            ],
            bottom_info: [
                { status:'待就诊',menp:'普通号',money:50,mtime:'2019-10-03',name:'张三',age:18,sex:'男',jianyan:'初检',time:20},
            ],
        }
    }
    async componentDidMount(){
        var res = await service.bottominfo({})
        console.log(res.data);
        this.setState({bottom_info:res.data})
    }
    async indexClick(index){
        this.setState({ssindex:index})
        if(index ===0){
            var res = await service.bottominfo({})
            console.log(res.data);
            this.setState({bottom_info:res.data})

        }
        if(index ===1){
            var res2 = await service.bottominfos({})
            console.log(res2.data);
            this.setState({bottom_info:res2.data})
        }
    }
    fanClick() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='hhao'>
                                <div className="top">
                    <h3 onClick={()=>{this.fanClick()}}>&lt; 挂号预约</h3>
                </div>
                <div className="list">
                    {
                        this.state.header_info.map((item,index)=>{
                            return(
                                <p className={'pps' + (this.state.ssindex === index ? 'active':'')} key={index} onClick={()=>{this.indexClick(index)}}>{item.name}</p>
                            )
                        })
                    }
                </div>
                <div className="bottom_info">
                    {
                        this.state.bottom_info.map((item,index)=>{
                            return(
                                <div className="infolist" key={index}>
                                    <div className="tops">
                                        <span className='spans'>{item.status}</span>
                                    </div>
                                    <div className="center">
                                        <p>普通门诊 <span>{item.menp}</span> <span>￥{item.money}</span></p>
                                        <p>门诊时间：{item.mtime} 周一 下午</p>
                                        <p>患者：{item.name}（{item.sex}，{item.age}岁）</p>
                                        <p>初/复诊：{item.jianyan}</p>
                                    </div>
                                    <div className="bottom">
                                        <p>{item.time}分钟前</p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default withRouter(Hhao);